<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>元素的显示与隐藏</title>
    <style>
        /* display */
        .damao {
            /* 1.隐藏元素 2.不保留位置 */
            display: none;
            /* display: block; 显示元素 */
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .ermao {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        /* display */

        /* visibility */
        .one {
            /* 1.隐藏元素 2.保留位置 */
            visibility: hidden;
            /* visibility: visible; 显示元素 */
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        /* visibility */

        /* overflow */
        .hana {
            /* 超出隐藏 visible显示 */
            overflow: hidden;
            /* overflow: scroll; 总是显示滚动条(水平+垂直,超不超出都显示) */
            /* overflow: auto; 超出时显示滚动条(垂直,不超出不显示)*/
            width: 130px;
            height: 130px;
            border: 1px solid crimson;
        }
         /* overflow */
    </style>
</head>
<body>
    <!-- display -->
    <div class="damao"></div>
    <div class="ermao"></div>
    <!-- display -->

    <!-- visibility -->
    <div class="one"></div>
    <div class="two"></div>
    <!-- visibility -->

    <!-- overflow -->
    <div class="hana">
        我的男人不过夜的
        我的男人不过夜的
        我的男人不过夜的
        我的男人不过夜的
        我的男人不过夜的
        我的男人不过夜的
        我的男人不过夜的
        我的男人不过夜的
        我的男人不过夜的
        我的男人不过夜的
    </div>
    <!-- overflow -->
</body>
</html>